html5中globalCompositeOperation属性的详细介绍

来源:网络整理作者: 发布时间:2020-12-21 21:23

globalCompositeOperation的默认值属性是source-over1、source-over及源在目标之上context.fillStyle =...

本篇文章给大家带来的内容是关于css3中background-orgin的使用方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

globalCompositeOperation的默认值属性是source-over

1、source-over及源在目标之上

context.fillStyle = 'aqua'; context.fillRect(50,50,100,100);//目标图形 context.globalCompositeOperation = 'source-over'; context.fillStyle = 'antiquewhite'; context.fillRect(100,100,100,100);//源图形

上面图形即为目标，下面图形为源

html5中globalCompositeOperation属性的详细介绍

2、destination-over目标在源上

html5中globalCompositeOperation属性的详细介绍

3、source-atop会将源绘制在目标之上，但是在重合区域上两者都是不透明的，绘制在其他位置上的目标是不透明的，源是透明的

context.fillStyle = 'aqua'; context.fillRect(50,50,100,100); context.globalCompositeOperation = 'source-atop'; context.fillStyle = 'antiquewhite'; context.fillRect(100,100,100,100);

html5中globalCompositeOperation属性的详细介绍

4、destination-atop与source-atop效果相反，在重叠部分两者都不透明，但在其他位置源不透明，目标透明

html5中globalCompositeOperation属性的详细介绍

5、source-in源与目标重叠部分只显示源，其他部分都变成透明

6、destination-in 源与目标重叠部分，只显示目标，其他都变成透明

7、source-out只显示源未重叠部分，其他部分都不显示

8、destination-out只显示目标未重叠部分，其他部分都不显示

9、lighter这个值与顺序无关，如果源与目标重叠，就将两个颜色值相加，得到颜色最大取值为255，取值为白色

10、copy只复制源

11、只复制源和目标不重叠部分，重叠部分透明

相关热词： HTML HTML5

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/6793.shtml

上一篇：html5 meter标签是什么意思？

下一篇：link与@import的区别有哪些

HTML5 学习总结（四）canvas绘图	canvas与html5实现视频截图成果
html5 canvas常用api总结(二)画图	Canvas跨域的解决方案介绍
canvas实现图片涂鸦功能（附代	用canvas实现简单的下雪效果（
HTML5 canvas中如何绘制图像	如何使用HTML5 canvas实现图像的
在canvas上实现元素图片镜像翻	html5利用canvas绘画二级树形结构
canvas绘制各种基本图形	利用Canvas模仿百度贴吧客户端
html5使用html2canvas实现浏览器截	HTML5 canvas绘制五角星的方法
html5使用canvas实现跟随光标跳动	使用canvas画“哆啦A梦”时钟的